<template>
  <view>
    <x-popup
      class="x-popup"
      :show="show"
      position="bottom"
      custom-style="background-color: #2E2E2E;border-radius: 48rpx 48rpx 0 0;"
    >
      <van-datetime-picker
        class="x-datetime-picker"
        :show-toolbar="true"
        :title="title"
        :type="type"
        :value="currentDate"
        :min-date="minDate"
        :max-date="maxDate"
        @change="change"
        @cancel="cancel"
        @confirm="confirm"
        @input="input"
      ></van-datetime-picker>
    </x-popup>
  </view>
</template>

<script setup>
import { ref, defineProps, defineEmits } from 'vue';
import dayjs from 'dayjs';

// 定义组件的 props
const props = defineProps({
  show: {
    type: Boolean,
    default: false
  },
  title: {
    type: String,
    default: ''
  },
  type: {
    type: String,
    default: 'date'
  },
  minDate: {
    type: Number,
    default: () => dayjs().subtract(10, 'year').valueOf()
  },
  maxDate: {
    type: Number,
    default: () => dayjs().valueOf()
  },
  value: {
    type: Number,
    default: () => dayjs().subtract(30, 'year').valueOf()
  }
});

// 定义 emit 事件
const emit = defineEmits(['change', 'cancel', 'confirm', 'input']);

// 响应式数据
const currentDate = ref(new Date().getTime());

// 事件处理方法
const change = (e) => {
  emit('change', e.detail);
};

const cancel = () => {
  emit('cancel');
};

const confirm = (e) => {
  emit('confirm', e.detail);
};

const input = (e) => {
  emit('input', e.detail);
};
</script>
<style lang="scss">

::v-deep .x-datetime-picker {
    .van-picker {
        background-color: #ffffff;
        border-radius: 48rpx 48rpx 0 0;
        overflow: hidden;
    }

    .van-picker__mask {
        background: transparent;
    }

    .van-picker-column__item {
        color: #cccccc;
    }

    .van-picker-column__item--selected {
        // color: $x-color-primary;
    }

    .van-hairline--top-bottom:after {
        border-color: #e5e5e5 !important;
    }

    .van-hairline--top-bottom {
        &:after {
            border-color: #383838;
        }
    }

    .van-picker__toolbar {
        border-bottom: 1px solid #e5e5e5;
        height: inherit;
        padding: 32rpx 0;
    }

    .van-picker__title {
        font-family: PingFang SC;
        font-weight: bold;
        font-size: 36rpx;
        color: #212121;
        line-height: 36rpx;
    }

    .van-picker__confirm {
        // color: $x-color-primary;
        font-family: PingFang SC;
        font-weight: 500;
        font-size: 32rpx;
        line-height: 32rpx;
        padding: 0 60rpx;
    }

    .van-picker__cancel {
        color: var(--third--self--color);
        font-family: PingFang SC;
        font-weight: 500;
        font-size: 32rpx;
        line-height: 32rpx;
        padding: 0 60rpx;
    }
}
</style>
